<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList"
		:loading-more-custom-style="{ paddingBottom: 'env(safe-area-inset-bottom)' }">
		<template #top>
			<view class="zpagin_top">
				<nav-bar :iconLeft="true" />
				<view class="search">
					<custom-search v-model="queryParams.search" @search="refreshList" placeholder="请输入客户名称/联系人/业务员" />
					<view style="display: flex; gap: 10rpx;">
						<uni-data-select style="z-index: 50;" placeholder="请选择客户类型" v-model="queryParams.classify"
							:localdata="classify_list" @change="refreshList" />
						<uni-data-select style="z-index: 50;" placeholder="请选择客户来源" v-model="queryParams.source"
							:localdata="source_list" @change="refreshList" />
					</view>
				</view>
				<dui-float-ball :pathUrl="`${pageUrl}/compile`" v-if="$hasPerm(['30101'])" />
			</view>
		</template>

		<u-swipe-action>
			<u-swipe-action-item v-for="item in dataList" :key="item.id"
				:name="JSON.stringify(swipeActPer(options, null)) + '&' + item.id + '&' + item.name"
				:options="swipeActPer(options, null)" :disabled="swipeActPer(options, null, 'disabled')" @click="action">
				<uni-card margin="0" spacing="0">
					<template v-slot:title>
						<uni-list>
							<uni-list-item :title="item.name" :note="item.classify_name" thumbSize="lg">
								<template v-slot:footer>
									<view class="font15">来源：{{ item.source_name }}</view>
								</template>
							</uni-list-item>
						</uni-list>
					</template>

					<view class="con">
						<view class="ctent">业务员：{{ item.salesman_full_name }}</view>
						<view class="ctent">应收账款：{{ item.money }}</view>
					</view>
					<view class="con">
						<view class="ctent">联系人：{{ item.full_name }}</view>
						<view class="ctent">电话：{{ item.phone }}</view>
					</view>
					<view>微信：{{ item.wechat }}</view>
					<view>QQ：{{ item.QQ }}</view>
					<view>邮箱：{{ item.email }}</view>

					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">办公地址：</view>
						<view class="ctent">{{ item.address }}</view>
					</view>
					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">主营业务：</view>
						<view class="ctent">{{ item.business }}</view>
					</view>
					<view>添加时间：{{ item.create_date }}</view>
					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">备注：</view>
						<view class="ctent">{{ item.desc }}</view>
					</view>
				</uni-card>

			</u-swipe-action-item>
		</u-swipe-action>
	</z-paging>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import clIndexApi from '../../../api/clientt/cl_index'
import { swipeActPer } from '@/utils/permission'
//作用于新增或编辑后刷新页面数据
uni.$bus.useBusOn('cl_index:refresh', refreshList);


onLoad(option => {
	get_client_classify_list()
	get_client_source_list()

});

const options = [
	{
		text: '修改',
		per: '30102',
		style: {
			backgroundColor: '#0081ff'
		}
	}, {
		text: '删除',
		per: '30103',
		style: {
			backgroundColor: '#f56c6c'
		}
	}
];

//页面跳转路径
const pageUrl = '/views/clientt/cl_index';

//查询参数
const queryParams = reactive({
	search: '',
	classify: '',
	source: ''
});

//获取paging实例
const paging = ref(null)
const dataList = ref([])
//列表数据方法
function queryList(pageNo, pageSize) {
	const params = {
		page: pageNo,
		page_size: pageSize,
		...queryParams
	}
	clIndexApi.get_client(params).then((res) => {
		paging.value?.complete(res.results);
	})
};

const classify_list = ref([])
function get_client_classify_list() {
	clIndexApi.get_client_classify({ page: 1, page_size: 99999 }).then(res => {
		classify_list.value = res.results.map(v => ({
			text: v.name,
			value: v.id
		}))
	})
};

const source_list = ref([])
function get_client_source_list() {
	clIndexApi.get_client_source({ page: 1, page_size: 99999 }).then(res => {
		source_list.value = res.results.map(v => ({
			text: v.name,
			value: v.id
		}))
	})
};
//滑动操作按钮
function action(v) {
	const options = JSON.parse(v.name.split("&")[0])
	const id = v.name.split("&")[1]
	const delName = v.name.split("&")[2]
	const index = v.index
	if (options[index].text == '修改') {
		uni.navigateTo({
			url: `${pageUrl}/compile?type=edit&id=${id}`
		})
	}
	if (options[index].text == '删除') {
		delete_type(id, delName)
	}
};

//删除操作
function delete_type(id, delName) {
	uni.showModal({
		title: '提示',
		content: `确认要删除：【${delName}】的客户吗？`,
		success: (res) => {
			if (res.confirm) {
				clIndexApi.delete_supplier(id).then((res) => {
					uni.$u.toast('删除成功')
					setTimeout(() => {
						refreshList();
					}, 500)
				})
			}
		}
	});
};


//编辑跳转刷新
function refreshList() {
	paging.value.reload();
}
</script>

<style lang="scss"></style>